<template>
  <div class="base-container">
    <t-form ref="form" :data="queryParams" label-width="80" @submit=" () => {
          this.pagination.current = 1;
          this.queryParams.pageNum = 1;
          this.getList();
        } "
      @reset="
        () => {
          this.pagination.current = 1;
          this.queryParams.pageNum = 1;
          this.getList();
        }
      "
    >
      <t-row style="border-bottom: 1px solid #e5e6eb; margin-bottom: 10px">
        <t-col :span="11" class="query-form-inline">
          <t-form-item label="年度" name="year">
            <t-select
              style="width: 240px"
              clearable
              v-model="queryParams.year"
              :options="yearOption"
            >
            </t-select>
          </t-form-item>
          <t-form-item label="提交单位" name="declareDeptName">
            <t-input
              style="width: 240px"
              clearable
              v-model="queryParams.declareDeptName"
            >
            </t-input>
          </t-form-item>
          <t-form-item label="审批状态" name="status">
            <t-select
              style="width: 240px"
              clearable
              v-model="queryParams.status"
              :options="dict.type.approve_status"
            >
            </t-select>
          </t-form-item>
        </t-col>
        <t-col :span="1" class="operation-container">
          <t-button theme="primary" type="submit">查询</t-button>
          <t-button theme="default" variant="outline" type="reset">重置</t-button>
        </t-col>
      </t-row>
    </t-form>
    <div class="btn-group-inline">
      <t-button @click="add()" variant="outline" theme="primary">
        <t-icon name="add" slot="icon"/>
        添加
      </t-button>
    </div>
      <t-table rowKey="id" :data="data" :columns="columns" hover :pagination="pagination" :loading="dataLoading">
      <template #name="{ row }">
        <t-link
          @click="
            dialog.objId = row.id;
            dialog.header = row.name;
            currentRow=row;
            dialog.open_detail = true;
          "
          hover="color"
          theme="primary"
          >{{ row.name }}</t-link
        >
      </template>
      <template #status="{ row }">
        <t-tag v-if="row.status" :theme="handleTheme(row.status, dict.type.approve_status )" variant="light">
               {{ row.status | filterByDict(dict.type.approve_status) }}
        </t-tag>
      </template>
      <template #op="{ row }">
        <t-button @click="edit(row)" size="small" variant="text" class="t-button-link">
          <t-icon name="edit-1" slot="icon" />
          编辑
        </t-button>
        <t-button theme="danger" @click="delObj(row)" size="small" variant="text" class="t-button-link">
          <t-icon name="edit-1" slot="icon" />
          删除
        </t-button>
        <t-button
          size="small"
          @click="
            dialog.objId = row.id;
            dialog.header = row.year;
            currentRow=row;
            dialog.open_detail = true;
          "
          variant="text"
          class="t-button-link"
        >
          <t-icon name="info-circle" slot="icon" />
          详情
        </t-button>
      </template>
    </t-table>
    <education-detail-dialog 
      :objId="dialog.objId"
      :header="dialog.header"
      :row="currentRow"
      :visible.sync="dialog.open_detail"
      v-if="dialog.open_detail"></education-detail-dialog>
  </div>
</template>
  
<script>
import educationDetailDialog from './components/education-detail-dialog.vue'

export default {
  name: 'education-my',
  dicts: ['approve_status'],
  components: {
    educationDetailDialog
  },
  data() {
    return {
      dialog: {
        header: '',
        open: false,
        objId: null,
        open_detail: false,
        open_add: false,
        isUpdate: false
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      data: [],
      currentRow: {},
      yearOption: [],
      columns: [
        {
          colKey: 'year',
          title: '年度',
          align: 'center',
        },
        {
          colKey: 'ywjyqzjs',
          title: '师资队伍-义务教育-本校全职科学教师数量',
          align: 'center',
        },
        {
          colKey: 'ywjyjzjs',
          title: '师资队伍-义务教育-本校兼职科学教师数量',
          align: 'center',
        },
        {
          colKey: 'ywjywpzjs',
          title: '师资队伍-义务教育-当年科学教育外聘专家数量',
          align: 'center',
        },
        {
          colKey: 'status',
          title: '审批状态',
          align: 'center',
        },
        {
          colKey: 'op',
          title: '操作',
          align: 'center',
          width: 140,
          fixed: 'right',
        },
      ],
      dataLoading: false,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showPageSize: true,
        pageSizeOptions: [10, 20, 30, 50],
        showFirstAndLastPageBtn: false,
        onChange: (pageInfo) => {
          Object.assign(this.pagination, pageInfo);
          this.queryParams.pageNum = pageInfo.current || 1;
          this.queryParams.pageSize = pageInfo.pageSize;
          this.getList();
        },
      },
    };
  },
  created() {
    Object.assign(this.queryParams, this.handelQuery(this.queryParams, this.$route.query));
    for (let i = 2030; i >= 2000; i--) {
      this.yearOption.push({key: i, label: i.toString(), value: i.toString()})
    }
    this.getList();
  },
  methods: {
    getList() {
      this.dataLoading = true;
      this.$api.kpzh.education.myList(this.queryParams).then((response) => {
        this.data = response.rows;
        this.pagination.total = response.total;
        this.dataLoading = false;
      }).catch((e) => {
        this.dataLoading = false;
        this.$message.error(e.toString());
      });
    },
    add() {
      this.open(false, {})
    },
    edit(currentRow) {
      this.open(true, currentRow)
    },
    open(isUpdate, currentRow) {
      this.$store.state.isUpdate = isUpdate
      const path = `/kpzh/other/education/education-add-edit/${isUpdate ? 'edit/' : ''}`
      this.$router.push({
        path:`${path}${Date.parse(new Date())}`,
        query:{
          isUpdate,
          currentRow
        }
      })
    },
    delObj(row) {
      const confirmDia = this.$dialog.confirm({
        header: "系统提示",
        body: `是否确认删除年份为"${row.year}"的数据项？`,
        theme: "warning",
        onConfirm: ({e}) => {
          this.$api.kpzh.education.delete(row.id).then(res => {
            this.getList();
            this.$message.success("删除成功");
            // 请求成功后，销毁弹框
            confirmDia.destroy();
          }
          ).catch((e) => {
            this.$message.error(e.toString());
          });
        }
      });
    }
  },
};
</script>
  
  <style scoped>
</style>
  